<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js常用时及其绑定</title>
		<style type="text/css">
			#cc{
				width: 300px;
				height: 300px;
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<!-- 单击事件 -->
		<button type="button" onclick="caibao()">唐江利</button><br>
		<!-- 双击事件 -->
		<div id="cc" ondblclick="xiaocai()" onmouseenter="kaishi()"
		onmouseleave="likai()" onmousemove="yidong()"></div><br>
		<form action="" method="post">
			用户名：<input type="text"  id="username" value=""  onfocus='jujiao()'
			onblur='likai2()' onchange="change();"/><br>
			密码：<input type="password" name="" onfocus="jujioa1()" onblur="likai3()" /><br>
			<button type="submit" onclick="tijiao">提交</button>
		</form>
		
	</body>
	
	<script type="text/javascript">
	// 单击按钮的弹窗
		function caibao(){
			alert('暴富')
		}
		// 双击按钮显示
		function xiaocai(){
			console.log('双击666!')
		}
		// 鼠标移动到框框上时显示
		function kaishi(){
			console.log('进入双击页面')
			document.getElementById('cc').style.backgroundColor='gold'
		}
		// 鼠标离开这个页面时显示的
		function likai(){
			console.log('离开双击页面')
			document.getElementById('cc').style.backgroundColor='gold'
		}
		// 鼠标停留在框框中时
		function yidong(){
			console.log('别点我')
		}
		
		//判断用户名
		function jujiao(){
			console.log('用户正在输入名称')
		}
		function likai2(){
			console.log('用户输入已完成')
			var username = document.getElementById('username')
			 if(username.value == ''){
			 	alert('没有输入用户名');
				return;
			 }
		}
		//判断密码是否输入
		function jujiao1(){
			console.log("用户正在输入密码")
			var password = document.getElementById('password')
			 if(password.value == ''){
			 	alert('没有输入密码');
				return;
			 }
		}
		
		//点击提交 判断用户名和密码是否为空
		function tijiao(){
			var userName = document.getElementById('username')
			var password = document.getElementById('password')
			if(userName.value == '' || userpwd.value == ''){
				alert('用户名和密码为空');
				return;
			}else if(userName.value == ''){
				alert('用户名为空');
				return;
			}else if(password.value == ''){
				alert('密码为空');
				return;
			}
		}
		
		
	</script>
			
</html>
